.AdminInit {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 1;

    &>.Image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        z-index: -2;
    }

    &>.Mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        z-index: -1;
        pointer-events: none;
    }

    .LogoTemplate {
        &.ThemeA01 {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 16px 8px;

            &>.logo {

                &>img {
                    width: 100%;
                    height: 100%;
                }
            }

            &>.title {
                transition: all 0.35s;
                overflow: hidden;
                text-align: center;
            }
        }

        &.ThemeA02 {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px 8px;

            &>.logo {
                &>img {
                    width: 100%;
                    height: 100%;
                }
            }

            &>.title {
                transition: all 0.35s;
                overflow: hidden;
                text-align: center;
            }

        }

    }

    .MenuTemplate {
        height: 100%;
        overflow: hidden;

        &>.Menu {
            width: 100%;
            height: 100%;
            padding: 8px 0px 56px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            overflow-y: scroll;

            &::-webkit-scrollbar {
                display: none;
            }

            .ant-menu {
                border-inline-end: none;
                background: transparent;

                .ant-menu-item,
                .ant-menu-submenu-title {
                    margin: 4px 0;
                    width: 100%;
                    border-radius: 0;
                }

                .ant-menu-item,
                .ant-menu-submenu-title {
                    color: var(--fontColor);
                }

                .ant-menu-title-content {
                    font-family: var(--fontFamily);
                    font-weight: var(--fontWeight);
                    font-style: var(--fontStyle);
                    font-size: var(--fontSize);
                    filter: drop-shadow(var(--fontShadowX) var(--fontShadowY) var(--fontShadowS) var(--fontShadowB));
                }

                .ant-menu-item-icon {
                    color: var(--iconColor);
                    margin-left: calc(var(--iconIndex) / 2);
                    font-size: var(--iconSize);
                    filter: drop-shadow(var(--iconShadowX) var(--iconShadowY) var(--iconShadowS) var(--iconShadowB));
                }

                .ant-menu-item-icon+span,
                .anticon+span {
                    margin-inline-start: var(--iconIndex);
                    margin-right: 16px;
                }

                .ant-menu-item-selected {
                    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--theme2));
                    color: var(--theme);
                    position: relative;
                    z-index: 1;

                    &::after {
                        position: absolute;
                        content: '';
                        right: 0;
                        top: 0;
                        width: 2px;
                        height: 100%;
                        background: var(--theme);
                        z-index: 1;
                    }
                }

                .ant-menu-submenu-selected>.ant-menu-submenu-title {
                    color: var(--theme);
                }

            }

            &>.isFold {
                width: 100%;
                padding: 8px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                position: absolute;
                left: 0;
                bottom: 0;

                &>button {
                    font-size: 24px;
                }
            }
        }
    }

    .HeadTemplate {
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(8px);

        &>.Title {
            flex: 1;
            padding: 0 16px;
        }

        &>.userBox {
            display: flex;
            align-items: center;
            justify-content: center;

            &>.options {
                margin-right: 16px;
                display: flex;
                align-items: center;
                justify-content: center;

                .icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    user-select: none;

                    &>span {
                        font-size: var(--iconSize);
                        color: var(--iconColor);
                        filter: drop-shadow(var(--iconShadowX) var(--iconShadowY) var(--iconShadowS) var(--iconShadowB));
                    }
                }
            }

            &>.userInfo {
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;

                .NameBox {
                    margin: 2px 8px;
                }
            }
        }
    }

    .BodyTemplate {
        flex: 1;
        overflow: hidden;

        &>.ant-tabs {
            height: 100%;

            &>.ant-tabs-nav {
                margin: 0;

                .ant-tabs-tab {
                    box-shadow: var(--shadow-1-down);
                }
            }

            &>.ant-tabs-content-holder {
                padding: 8px;
                box-shadow: var(--boxShadow);
                background: var(--bodyBack);
                backdrop-filter: blur(var(--bodyPx));
                border-radius: 0 0 var(--bodyRadio) var(--bodyRadio);

                &>.ant-tabs-content {
                    height: 100%;

                    &>.ant-tabs-tabpane {
                        height: 100%;
                    }
                }
            }

            .ant-tabs-tab {
                background: var(--tabsBack);
                border: 1px var(--tabsBorderType) var(--tabsBorderColor);
                border-radius: var(--tabsRadio) var(--tabsRadio) 0 0;
                color: var(--fontColor);
                font-family: var(--fontFamily);
                font-weight: var(--fontWeight);
                font-style: var(--fontStyle);
                font-size: var(--fontSize);
            }

            .ant-tabs-tab-active {
                background: var(--tabsActive);
            }

            .ant-tabs-tab-icon {
                display: var(--iconState);
                margin-inline-end: var(--iconIndex);

                &>span {
                    font-size: var(--iconSize);
                    filter: drop-shadow(var(--iconShadowX) var(--iconShadowY) var(--iconShadowS) var(--iconShadowB));
                }
            }
        }
    }

    &.ThemeA01 {
        display: flex;
        align-items: center;
        justify-content: center;

        &>.Left {
            padding: 0;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            overflow: hidden;
        }

        &>.Right {
            flex: 1;
            padding: 0;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            overflow: hidden;
        }
    }

    &.ThemeA02 {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        overflow: hidden;

        &>div {
            width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: center;

            &.Btm {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                margin-bottom: 8px;

                &>div {
                    height: 100%;
                }
            }
        }
    }
}

.HeadA01__UserInfo {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-1-down);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 8px;

    &>.UserInfo {
        width: 100%;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(38, 38, 38, 0.35);
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        &>div {
            &>div {
                margin-left: 8px;
            }
        }
    }

    &>.Options {
        width: 100%;
        padding: 0 16px;

        .Downnav {
            line-height: 32px;
            font-size: 16px;
            color: #262626;
            font-weight: 600;
            font-family: PingFang;
            cursor: pointer;
            padding: 4px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;

            &:hover {
                background: rgba(0, 0, 0, 0.1);
                border-radius: 8px;
            }
        }
    }

    &>.SignOut {
        padding: 8px;
    }

    &>.ant-dropdown-menu {
        padding: 0;
    }
}

.Admin__Head__Options {
    .ant-tooltip-inner {
        color: var(--toolColor);
        font-family: var(--toolFamily);
        font-weight: var(--toolWeight);
        font-style: var(--toolStyle);
        font-size: var(--toolSize);
        filter: drop-shadow(var(--toolShadowX) var(--toolShadowY) var(--toolShadowS) var(--toolShadowB));
    }
}

.winbox {
    .AnnexImage {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .AnnexIframe,
    .AnnexVideo {
        display: flex;
        width: 100%;
        height: 100%;
    }
}

.largeMask {
    position: fixed;
    transform: scale(1);
    left: 0;
    top: 0;
    z-index: 2000;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;

    .Unlock {
        position: absolute;
        left: 0;
        bottom: 80px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        &>.InputBox {
            pointer-events: auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }


    }
}